#{extends 'main.html' /}
#{set title:'Students' /}

<script>
    function submitF() {
        $("#form").submit();
        
    }
    
    
    function submitU() {
    	$("#su_id").val(''+($("#s_id").val()));
    	$("#updateform").submit();
    }
</script>

<h1> Update Student </h1>

<form id ="form" action="@{Application.displayStudents()}" method="POST">
    Select a student <select size="1" name="id" id = "s_id" onchange="submitF()"> 
                <option value="">--</option>
            #{list items:students, as:'su'}
                #{if su.id == id}
                <option selected="selected" value="${su.id}">${su.fname}</option>
                #{/if}
                #{else}
                 <option value="${su.id}">${su.fname}</option>
                #{/else}
            #{/list}
           </select> 

</form>
<br>
#{if id!= null}

<form id ="updateform" action="@{Application.updateStudent()}" method="POST" enctype="multipart/form-data">
    <input type="hidden" id = "su_id" name = "id">
    <script>
    $("#su_id").val(''+($("#s_id").val()));
    </script>
    <table border="0">
    <tbody>
    <tr><td>Name</td> 
    <td><input type="text" name="fname" value="${s.fname}" required ="required"/>*
    <input type="text" name="mname" value="${s.mname}" required ="required"/>*
    <input type="text" name="lname" value="${s.lname}" required ="required"/>*</td></tr>
    <tr><td>Gender</td>
    <td><select name="gender">
    #{if s.gender}
    <option selected="selected">Male</option>
    <option>Female</option>
    #{/if}
    #{else}
    <option>Male</option>
    <option selected="selected">Female</option>
    #{/else}
    </select>
    </td> </tr>
    <tr><td>Date Of Birth</td> <td> <input type="text" name="dateOfBirth" id ="date" value="${new java.text.SimpleDateFormat("dd/MM/yyyy").format(s.dateOfBirth)}" required ="required" />* </td></tr>
    <tr><td>Home Address </td><td><input type="text" name="homeAddress" value="${s.homeAddress}" required ="required"/>*</td></tr>
    <tr><td>Home Phone </td><td> <input type="text" name="homePhone" value="${s.homePhone}" required ="required"/>* </td></tr>
    <tr><td>Membership ID </td><td> <input type="text" name="membershipID" value="${s.MembershipID}" /></td></tr>
    <tr><td>Mobile #1 </td><td> <input type="text" name="mobilePhone1" value = "${s.mobilePhone}" required ="required"/>* </td></tr>
    <tr><td>Mobile #2 </td><td><input type="text" name="mobilePhone2" value="${s.mobilePhone2}" /> </td></tr>
    <tr><td>Email #1 </td><td><input type="text" name="email1" value ="${s.email}" required ="required"/>* </td></tr>
    <tr><td>Email #2 </td><td><input type="text" name="email2" value ="${s.email2}" /> </td></tr>
    <tr><td>Barcode</td><td><input type="text" disabled="disabled" value ="${s.barcode}" /> </td></tr>
    <tr><td>Photo </td><td><input type="file" name="photo" /> <i style="font-size: small;">The uploaded photo will overwrite the existing one</i> </td></tr>
    
    </tbody>
    </table>
    <br>
    <input type="submit" value="Update"/>
    
</form>

<div id = "picture" style="left:700px; top:20px;position: absolute;width: 20em; border: thick; border-color: window;black;height: 20em;">

#{if s.hasPhoto()}
<img src="@{studentPhoto(s.id)}"  style="width: 17em; height: 17em; ">
#{/if}
#{else}
<img src="@{'/public/images/no_image.gif'}"  style="width: 17em; height: 17em; ">
#{/else}

</div>
<br>

#{/if}

